<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百商汇</title>
	<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0,user-scalable = no,width = device-width">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="../csses/recommend.css">
</head>
<body>
	<div class="recommend_title">
		我的推荐
		<img src="../image/back.png" onclick="goBack()">
	</div>
	<div class="recommend_box">
		<div class="tab_box">
			<ul class="tab">
				<li style="background-color: #dc4b19;" class="tabTitle">商户</li>
				<li class="tabTitle">会员</li>
				<li class="tabTitle">微信关注</li>
			</ul>
		</div>
		<div class="tabContent getMyRecMerchantList" style="display: block;" id="getMyRecMerchantList">
			<ul>
				<!-- <li>
					<img src="">
					<p class="p1">商户名：商户全程（改动）</p>
					<p class="p2">地址：需改动</p>
					<p class="p3">电话：需改动</p>
				</li> -->
			</ul>
		</div>
		<div class="tabContent getMyRecUserList" id="getMyRecUserList">
			<ul>
				<!-- <li>
					<img src="">
					<p class="p1">88888888888</p>
					<p class="p2">普通会员</p>
				</li> -->
			</ul>
		</div>
		<div class="tabContent getMyRecWXList" id="getMyRecWXList">
			<ul>
				<!-- <li>
					<p class="p1">Cheer</p>
					<p class="p2">2016-10-08</p>
				</li> -->
			</ul>
		</div>
	</div>

	<div id="remindBox"></div>

	<script type="text/javascript" src="../lib/flexible.js"></script>
	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="../lib/iscroll.js"></script>
	<script type="text/javascript" src="../javascript/pullToRefresh.js"></script>
	<script type="text/javascript">
		onload = function(){
			var tab = new Tab('tabTitle','tabContent');
			tab.init();

			getRecMerList(1);
			getRecUserList(1);
			getWxRecList(1);
		};

		function remind(message){
			$('#remindBox').css('display','block').text(message);
			setTimeout(function(){
				$('#remindBox').css('display','none');
			},1500)
		}

		function Tab(classname1,classname2){
			this.aLi = document.getElementsByClassName(classname1);
			this.aDiv = document.getElementsByClassName(classname2);
		}

		Tab.prototype.init = function(){
			that = this;
			for(var i = 0; i < this.aLi.length; i++){
				this.aLi[i].index = i;
				this.aLi[i].onclick = function(){
					that.change(this);
				}
			}
		};

		Tab.prototype.change = function(obj){
			for(var i = 0; i < this.aLi.length; i++){
				this.aLi[i].style.backgroundColor = '#999';
				this.aDiv[i].style.display = 'none';
			}
			obj.style.backgroundColor = '#dc4b19';
			this.aDiv[obj.index].style.display = 'block';
		};

		function goBack(){
			window.history.back();
		}

		function getRecMerList(page){
			$.ajax({
				type : "POST",
				url : "/api/v1/user/getMyRecMerchantList",
				data : {
					paramStr: "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "','pageIndex':'" + page + "','pageSize':'" + 10 + "'}"
				},
				dataType : "json",
				timeout : 10000,
				success : function (data) {
					if(data.code == 200){
						var obj = JSON.parse(data.data);
						var recMerchantList = obj.myRecMerchantList;
						if(recMerchantList.length != 0){
							var $ulEle = $('#getMyRecMerchantList ul');
							for(var i = 0; i < recMerchantList.length; i++){
								var $li = $('<li></li>').appendTo($ulEle);
								$('<img/>').attr('src',recMerchantList[i].img_cover_small).appendTo($li);
								$('<p></p>').addClass('p1').text('商户名：' + recMerchantList[i].merchant_name).appendTo($li);
								$('<p></p>').addClass('p2').text('地址：' + recMerchantList[i].address).appendTo($li);
								$('<p></p>').addClass('p3').text('电话：' + recMerchantList[i].mobile).appendTo($li);
							}
						}else{
							remind('无更多推荐');
						}
					}
				},
				error : function (xhr,type,errorThrown){
					// alert('未知错误');
				}
			});
		}
		
		function getRecUserList(page){
			$.ajax({
				type : "POST",
				url : "/api/v1/user/getMyRecUserList",
				data : {
					paramStr: "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "','pageIndex':'" + page + "','pageSize':'" + 10 + "'}"
				},
				dataType : "json",
				timeout : 10000,
				success : function (data) {
					if(data.code == 200){
						var obj = JSON.parse(data.data);
						var recUserList = obj.myRecUserList;
						if(recUserList.length != 0){
							var $ulEle = $('#getMyRecUserList ul');
							for(var i = 0; i < recUserList.length; i++){
								var $li = $('<li></li>').appendTo($ulEle);
								$('<img/>').attr('src',recUserList[i].head_img).appendTo($li);
								$('<p></p>').addClass('p1').text(recUserList[i].mobile).appendTo($li);
								$('<p></p>').addClass('p2').text(recUserList[i].levelName).appendTo($li);
							}
						}else{
							remind('无更多推荐');
						}
					}
				},
				error : function (xhr,type,errorThrown){
					// alert('未知错误');
				}
			});
		}
		

		function getWxRecList(page){
			$.ajax({
				type : "POST",
				url : "/api/v1/user/getWxRecList",
				data : {
					paramStr: "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "','pageIndex':'" + page + "','pageSize':'" + 10 + "'}"
				},
				dataType : "json",
				timeout : 10000,
				success : function (data) {
					if(data.code == 200){
						var obj = JSON.parse(data.data);
						var recWXList = obj.myWxRecList;
						if(recWXList.length != 0){
							var $ulEle = $('#getMyRecWXList ul');
							for(var i = 0; i < recWXList.length; i++){
								var $li = $('<li></li>').appendTo($ulEle);
								$('<p></p>').addClass('p1').text(recWXList[i].nickname).appendTo($li);
								$('<p></p>').addClass('p2').text(recWXList[i].create_time).appendTo($li);
							}
						}else{
							remind('无更多推荐');
						}
					}	
				},
				error : function (xhr,type,errorThrown){
					// alert('未知错误');
				}
			});
		}

		var abc = 1,def = 1,ghi = 1;
		
		refresher.init({
			id:"getMyRecMerchantList",
			pullUpAction:Load1
		});																																							
		function Load1(){
			abc++;
			getRecMerList(abc);
			getMyRecMerchantList.refresh();
		}

		refresher.init({
			id:"getMyRecUserList",                                          
			pullUpAction:Load2
		});

		function Load2(){
			def++;
			getRecUserList(def);
			getMyRecUserList.refresh();
		}

		refresher.init({
			id:"getMyRecWXList",
			pullUpAction:Load3
		});																																							
		function Load3(){
			ghi++;
			getWxRecList(ghi);
			getMyRecWXList.refresh();
		}
	</script>
</body>
</html>